.Card {
    background-color: #fefefe;
    box-sizing: border-box;
    width: 14rem;
    margin: 0.7rem
}
.title {
    font-size: 1.1em;
    letter-spacing:-0.05em
}
.icon {
    width: 6rem;
    height: 7rem;
}
.star{
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
}
.star svg {
    width: 1.3em;
    height: 1.3em;
    fill: none;
    z-index: 2;
}
.checkbox-trigger {
    display: none;
}
.star-shine {
    stroke: #e5e5e5;
    stroke-width: 5;
    stroke-linecap: round;
}
.star-border {
    stroke: #1890FF;
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 270px;
    stroke-dashoffset: 270px;
    fill:#e5e5e5 ;
}
.checkbox-trigger:checked + svg {
    animation: .25s pop .5s linear forwards;
}
.checkbox-trigger:checked + svg .star-border {
    animation: .75s star linear forwards;
}

@keyframes star {
    66.6%{
        stroke-dashoffset: 0;
    }
    90% {
        fill: #e5e5e5;
        stroke-dashoffset: 0;
    }
    100% {
        fill: #FFD04B;
        stroke-dashoffset: 0;
    }
}
@keyframes pop {
    30% {
        transform: scale(1.1);
    }
    60% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
        fill: #FFD04B;
    }
}